<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品列表</title>
    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/aboutUs.css">

</head>

<body>
    <div id="app">
        <!-- top nav -->
        <div class="top" v-if="isShow">
            <div class="headerNav">
                <div class="row" style="height: 160px;">
                    <div class="col-sm-3">
                        <div class="img" style="height: 160px;line-height: 160px;">
                            <img src="images/aoklight.png" style="height: 130px;" alt="">
                        </div>
                    </div>
                    <div class="col-sm-7" style="text-align: right;">
                        <span><svg t="1612754067666" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1647" width="20" height="20">
                                <path d="M65.2 202.9H960v617.7H65.2z" fill="#00237A" p-id="1648"></path>
                                <path
                                    d="M960 419.8H599V202.9H423.5v216.9H65.2v184.1h358.3v216.7H599V603.9h361V419.8z m0 0"
                                    fill="#FFFFFF" p-id="1649"></path>
                                <path d="M960 750.2L165.6 202.9H65.2v71.2l793.7 546.5H960v-70.4z m0 0" fill="#FFFFFF"
                                    p-id="1650"></path>
                                <path d="M65.2 750.2L859.6 203H960v71.2L166.3 820.6H65.2v-70.4z m0 0" fill="#FFFFFF"
                                    p-id="1651"></path>
                                <path
                                    d="M960 458.5H562.1V202.9H460.3v255.5H65.2v106.8h395.1v255.4h101.8V565.3H960V458.5z m0 0"
                                    fill="#CF142B" p-id="1652"></path>
                                <path
                                    d="M960 820.6v-48.5L713.8 603.9h-69.3L960 820.6z m0-617.7h-69.3L599 401.6v18.2h43.3L960 202.9z m-582 401L65.2 819.1v1.5h66.4l291.8-200v-16.7H378z m-312.8-401v48.5l244.9 168.4h70L65.2 202.9z m0 0"
                                    fill="#CF142B" p-id="1653"></path>
                            </svg> Engilsh</span>
                        <span><svg t="1612754127821" class="icon" viewBox="0 0 1609 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2708" width="20" height="20">
                                <path d="M0.219429 1.536H1607.68v1020.781714H0.219429z" fill="#FFFFFF" p-id="2709">
                                </path>
                                <path d="M1071.762286 1.536h535.844571v1020.781714h-535.844571z" fill="#E73826"
                                    p-id="2710"></path>
                                <path d="M0 1.536h535.844571v1020.781714H0z" fill="#00489D" p-id="2711"></path>
                            </svg> Français</span>
                        <span> <img src="images/Espanol.png" alt=""> Español</span>
                        <span> <svg t="1612754337813" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="8279" width="20" height="20">
                                <path d="M23.273 134.982h977.454v218.763H23.273z" fill="#211613" p-id="8280"></path>
                                <path d="M23.273 351.418h977.454v214.11H23.273z" fill="#C73936" p-id="8281"></path>
                                <path d="M23.273 565.527h977.454v218.764H23.273z" fill="#E7CA2D" p-id="8282"></path>
                            </svg> Deutsch</span>
                    </div>
                    <!-- <div class="col-sm-2">
                        <a href="#">登录</a>|
                        <a href="#">注册</a>
                    </div> -->
                </div>
            </div>

        </div>
        <!-- <div> -->
        <div class="headerImg" v-if="!isShow">
            <img src="images/aoklight.png" style="height: 38px;" alt="">
        </div>
        <!-- </div> -->
        <div class="header sticky-top ">
            <div class="container">
                <div class="headerNav">
                    <nav class="navbar navbar-expand-lg navbar-light" style="padding: 0;">
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse" style="position: relative;" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto navUl">
                                <li class="nav-item">
                                    <a class="nav-link" href="index.html">首页</a>
                                </li>
                                <li class="nav-item dropdown" @mouseover="selectStyle"
                                    @click="window.location.href = 'projects.html'">
                                    <a class="nav-link dropdown-toggle" href="projects.html" id="navbarDropdown"
                                        role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        产品 <i class="el-icon-arrow-down"></i>
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" v-if="dropdownShow">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </li>
                                <!-- pc端Products hover -->
                                <div class="dropdownDiv" v-if="navShow" @mouseleave="outStyle">
                                    <div class="row" style="margin-left: 0;margin-right: 0;">
                                        <div class="col-md-3">
                                            <div :class="['item',dropdownIndex === index ? 'active':'']" class="item"
                                                @mouseover="selectDropdownDiv(item,index)"
                                                v-for="(item,index) in dropdownList" :key="index">
                                                {{ item.title }}
                                            </div>
                                        </div>
                                        <div class="btnPrimaryActive col-md-9" style="text-align: left;">
                                            <el-button type="primary" plain v-for="(item,index) in btnList"
                                                :key="index">{{item.name}}</el-button>
                                        </div>
                                    </div>
                                </div>
                                <li class="nav-item">
                                    <a class="nav-link" href="case.html">项目案例</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="download.html">资源下载</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="contact-us.html">联系我们</a>
                                </li>
                                <div class="ffgg" style="height: 60px;">
                                    <div class="btn-group" style="height: 100%;background-color: #0c6fb3;">
                                        <button type="button" class="btn" style=" font-weight: 600; background-color: #0c6fb3;color: #ffffff; font-weight: 600; font-size: 16px;"
                                            @click="window.location.href = 'aboutUs.html'">关于我们 </button>
                                        <button type="button" class="btn dropdown-toggle dropdown-toggle-split"
                                            id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false" data-reference="parent">
                                            <span class="el-icon-arrow-down"></span>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
                                            <!-- <i class="el-icon-arrow-down"></i> -->
                                            <a class="dropdown-item" href="faqlist.html">FAQ</a>
                                            <a class="dropdown-item" href="aok-production-center.html">AOK Production
                                                Center</a>
                                            <a class="dropdown-item" href="aok-testing-facilities.html">Aok Testing
                                                Facilities</a>
                                        </div>
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
        <div class="main">
            <!-- 走马灯 -->
            <div class="carouselDiv">
                <div class="headerNav">
                    <div class="breadcrumb">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>
                                <a href="index.html">
                                    <svg t="1612527160614" class="icon" viewBox="0 0 1000 1000" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="1582" width="14" height="14">
                                        <path
                                            d="M969.5 572.557l-468.75-363.867-468.75 363.867v-148.359l468.75-363.867 468.75 363.867zM852.313 559.344v351.563h-234.375v-234.375h-234.375v234.375h-234.375v-351.563l351.563-263.672z"
                                            p-id="1583" fill="#303133"></path>
                                    </svg>
                                    首页
                                </a>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item><a href="/">关于我们</a></el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <el-carousel trigger="click" :height="img_height + 'px'">
                        <el-carousel-item v-for="(item,index) in carouselImg" :key="index">
                            <img :src="item" :alt="item" @load="img_load" ref='img_ref' style="width: 100%;">
                        </el-carousel-item>
                    </el-carousel>
                </div>

            </div>
            <!-- About AOK > -->
            <div class="newProducts">
                <div class="headerNav">
                    <div class="alignBothEnds">
                        <div class="item">About AOK ></div>
                    </div>
                    <div>
                        <p>Specialized in outdoor and industrial lighting, high-temperature lighting solutions, solar
                            energy, and intelligent control systems, AOK products have been widely used by its high-end
                            and professional clients over 100+ countries. Our annual revenue reaches USD$33 million in
                            2019.</p>
                        <p>Specialized in outdoor and industrial lighting, high-temperature lighting solutions, solar
                            energy, and intelligent control systems, AOK products have been widely used by its high-end
                            and professional clients over 100+ countries. Our annual revenue reaches USD$33 million in
                            2019.</p>
                        <p>Specialized in outdoor and industrial lighting, high-temperature lighting solutions, solar
                            energy, and intelligent control systems, AOK products have been widely used by its high-end
                            and professional clients over 100+ countries. Our annual revenue reaches USD$33 million in
                            2019.</p>
                        <p>Specialized in outdoor and industrial lighting, high-temperature lighting solutions, solar
                            energy, and intelligent control systems, AOK products have been widely used by its high-end
                            and professional clients over 100+ countries. Our annual revenue reaches USD$33 million in
                            2019.</p>
                    </div>
                </div>

            </div>
            <!-- Major Strategic Partners > -->
            <div class="newProducts">
                <div class="headerNav">
                    <div class="alignBothEnds">
                        <div class="item">Major Strategic Partners ></div>
                    </div>
                    <div class="major">
                        <img src="images/x3.jpg" alt="">
                    </div>
                </div>
            </div>


            <!-- AOK R&D Center > -->
            <div class="newProducts">
                <div class="headerNav">
                    <div class="alignBothEnds">
                        <div class="item">AOK R&D Center ></div>
                    </div>
                    <el-carousel trigger="click" height="571px">
                        <el-carousel-item v-for="(item,index) in bottomIng" :key="index">
                            <img :src="item" :alt="item" @load="imgBotton_load" ref='imgBotton_ref'
                                style="width: 100%;">
                        </el-carousel-item>
                    </el-carousel>
                    <div>Our engineers have over 10 years of experience in structural, thermal, mechanical and optical
                        design. Our R&D team members have rich project experiences, which can help to solve the special
                        needs of customers' projects and meet their requirements for product performance. We continue to
                        improve our product development process and efficiency to provide reliable lighting solutions
                        for the market.</div>
                </div>
            </div>
            <!-- AOK on The Expo > -->
            <div class="newProducts">
                <div class="headerNav">
                    <div class="alignBothEnds">
                        <div class="item">AOK on The Expo ></div>
                    </div>
                    <div class="expo">
                        <div class="item" v-for="(item , index) in expoList" :key="index">
                            <img :src="item" alt="">
                        </div>
                        <div class="item"></div>
                    </div>
                    <div>
                        Welcome to contact us, we look forward to our first cooperation!
                    </div>
                </div>
            </div>
        </div>

        <!-- bottom -->
        <div class="bottom">
            <div class="headerNav">
                <div class="item">
                    <div class="itemTitle">Quick Links</div>
                    <div v-for="(item,index) in quickLinks" :key="index">
                        <a href="#"><i class="el-icon-arrow-right"></i> {{item.name}}</a>
                        <el-divider></el-divider>
                    </div>
                </div>
                <div class="item">
                    <div class="itemTitle">Products & Projects</div>
                    <div v-for="(item,index) in productsProjects" :key="index">
                        <a href="#"><i class="el-icon-arrow-right"></i>{{item.name}}</a>
                        <el-divider></el-divider>
                    </div>
                </div>
                <div class="item">
                    <div class="itemTitle">Quick Links</div>
                    <div>
                        Email: wally@aokledlight.com <br>
                        General Manager: Wally (Yafeng Hei)<br>
                        Telephone:<br>
                        Shenzhen Factory: 0086-755-33274636<br>
                        Sales Manager: Journey<br>
                        Fuzhou Headquarter: 0086-591-83820886<br>
                        Sales Manager: Elaine<br>
                        USA Office Line：+1 （626）420 8777<br>
                        VP: Kathy Mason<br>
                        USA Warehouse: 18541 E Gale Ave, City of Industry, CA91748<br>
                    </div>
                </div>
            </div>
        </div>
        <div class="keepOnRecord">
            Copyright © XXXX-XXXX AOK All Rights Reserved.
        </div>
        <div class="sign">
            <img src="images/cert.png" alt="">
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
    <!-- import Vue before Element -->
    <script src="js/vue2.6.11.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- import JavaScript -->
    <script src="js/ele-index.js"></script>
    <script>
        Vue.use(VueAwesomeSwiper)
        var app = new Vue({
            el: "#app",
            data() {
                return {
                    isShow: true,
                    navShow: false,
                    dropdownShow: false,
                    screenWidth: '',
                    dropdownIndex: '',
                    value: '',
                    // 导航栏按钮父类型
                    dropdownList: [{
                            title: 'OUTDOOR LED OUTDOOR LED',
                            children: [{
                                name: 'Area Light'
                            }, {
                                name: 'Area Light'
                            }, {
                                name: 'Area Light'
                            }, {
                                name: 'Area Light'
                            }, ]
                        },
                        {
                            title: 'OUTDOOR LED OUTDOOR LED',
                            children: [{
                                name: 'Area '
                            }, {
                                name: 'Area '
                            }, {
                                name: 'Area '
                            }, {
                                name: 'Area '
                            }, ]
                        }
                    ],
                    // 导航栏按钮数据
                    btnList: [],

                    // 上面走马灯 ---------------------------------------
                    carouselImg: ['images/banner2.png', 'images/banner4.png', 'images/banner2.png',
                        'images/banner4.png'
                    ],
                    bottomIng: ['images/x7.jpg', 'images/x5.jpg', 'images/x5.jpg', 'images/x82.jpg'],

                    // 走马灯高度
                    img_height: '',
                    imgBotton_Height: '',

                    newProductList: [{
                        id: 1,
                        imageUrl: 'images/ins1-460-460.png',
                        title: 'AOK-900WiNF (iNFD Diffused Type)',
                        introduce: 'Up to 150LM/W, High performance LED flood light. 315W~720W available. A variety of flood distributions for lighting applications such as Stadium and Port.'
                    }, {
                        id: 2,
                        imageUrl: 'images/ins1-460-460.png',
                        title: 'AOK-900WiNF (iNFD Diffused Type)',
                        introduce: 'Up to 150LM/W, High performance LED flood light. 315W~720W available. A variety of flood distributions for lighting applications such as Stadium and Port.'
                    }, {
                        id: 3,
                        imageUrl: 'images/ins1-460-460.png',
                        title: 'AOK-900WiNF (iNFD Diffused Type)',
                        introduce: 'Up to 150LM/W, High performance LED flood light. 315W~720W available. A variety of flood distributions for lighting applications such as Stadium and Port.'
                    }, {
                        id: 4,
                        imageUrl: 'images/ins1-460-460.png',
                        title: 'AOK-900WiNF (iNFD Diffused Type)',
                        introduce: 'Up to 150LM/W, High performance LED flood light. 315W~720W available. A variety of flood distributions for lighting applications such as Stadium and Port.'
                    }],
                    swiperList: [{
                        id: 1,
                        imageUrl: 'images/Cover.jpg',
                        title: '【Project】230W LED parking lot light installation in Canada',
                        introduce: "The client's project in Canada required the renovation of the parking lot lighting system and the replacement of the old lamps. ",
                        time: " 21 December 2020 "
                    }, {
                        id: 2,
                        imageUrl: 'images/Cover.jpg',
                        title: '【Project】230W LED parking lot light installation in Canada',
                        introduce: "The client's project in Canada required the renovation of the parking lot lighting system and the replacement of the old lamps. ",
                        time: " 21 December 2020 "
                    }, {
                        id: 3,
                        imageUrl: 'images/Cover.jpg',
                        title: '【Project】230W LED parking lot light installation in Canada',
                        introduce: "The client's project in Canada required the renovation of the parking lot lighting system and the replacement of the old lamps. ",
                        time: " 21 December 2020 "
                    }, {
                        id: 4,
                        imageUrl: 'images/Cover.jpg',
                        title: '【Project】230W LED parking lot light installation in Canada',
                        introduce: "The client's project in Canada required the renovation of the parking lot lighting system and the replacement of the old lamps. ",
                        time: " 21 December 2020 "
                    }, {
                        id: 5,
                        imageUrl: 'images/Cover.jpg',
                        title: '【Project】230W LED parking lot light installation in Canada',
                        introduce: "The client's project in Canada required the renovation of the parking lot lighting system and the replacement of the old lamps. ",
                        time: " 21 December 2020 "
                    }],
                    cardSpanActive: '',
                    expoList: ['images/ex5-640-640.jpg', 'images/ex5-640-640.jpg', 'images/ex5-640-640.jpg',
                        'images/ex5-640-640.jpg', 'images/ex5-640-640.jpg'
                    ],
                    // bottom ------------------------------------------
                    quickLinks: [{
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        }
                    ],
                    productsProjects: [{
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                    ],
                }
            },
            created() {
                window.addEventListener('resize', this.handleResize)
                this.handleResize()
                // this.isShow = false
                // this.fullWidth = document.documentElement.clientWidth;
                // // 页面宽度小于750px时，不显示地图
                // if (this.fullWidth < 500) {
                //     this.isShow = false;
                //     this.dropdownShow = false
                //     this.navShow = true
                // } else {
                //     this.isShow = true;
                //     this.dropdownShow = true
                //     this.navShow = false
                // }
            },
            mounted() {
                const that = this;
                that.screenWidth = window.innerWidth;
                window.onresize = function () {
                    return that.screenWidth = window.innerWidth
                };
                console.log(that.screenWidth);

            },
            watch: {
                screenWidth(val) {
                    // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
                    if (!this.timer) {
                        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
                        this.screenWidth = val
                        this.timer = true
                        let that = this
                        setTimeout(function () {
                            // 打印screenWidth变化的值
                            console.log(that.screenWidth)
                            if (that.screenWidth < 992) {
                                console.log("haole");
                                that.dropdownShow = true
                                that.navShow = false
                            }
                            that.timer = false
                        }, 400)
                    }
                }
            },
            methods: {
                handleResize(event) {
                    this.fullWidth = document.documentElement.clientWidth;
                    // 页面宽度小于750px时，不显示地图
                    if (this.fullWidth < 500) {
                        this.isShow = false;
                        this.dropdownShow = false
                        this.navShow = true
                    } else {
                        this.isShow = true;
                        this.dropdownShow = true
                        this.navShow = false
                    }
                },
                cardSpanHover: function (index) {
                    this.cardSpanActive = index;
                    console.log(this.cardSpanActive)
                    // console.log(this.$refs.cardSpan)
                    // console.log(this.$refs.cardSpan.style)
                    // this.$refs.cardSpan.style = '200px';
                },
                img_load: function () {
                    // console.log(this.$refs.img_ref[0].height, 'img_height')
                    this.img_height = this.$refs.img_ref[0].height
                    // console.log(this.$refs.img_ref[0].width, 'img_width')
                },
                imgBotton_load: function () {
                    // console.log(this.$refs.imgBotton_ref[0].height, 'imgBotton_Height')
                    this.imgBotton_Height = this.$refs.imgBotton_ref[0].height
                    // console.log(this.$refs.imgBotton_ref[0].width, 'img_width')
                },
                selectStyle: function () {
                    var that = this;
                    that.navShow = true
                },
                outStyle: function () {
                    var that = this;
                    that.navShow = false
                },
                handleNodeClick: function (data) {
                    console.log(data);
                },
                selectDropdownDiv: function (item, index) {
                    console.log(item)
                    var that = this;
                    that.dropdownIndex = index;
                    that.btnList = item.children;
                },
                godetail: function (id) {
                    console.log(id)
                    window.location.href = 'projectDetail.html?id=' + id
                }
            }
        })
    </script>
</body>

</html>